<template>
  <admin-layout>
    <div class="users-view">
      <h2 class="page-title">用户管理</h2>
      <Suspense>
        <UserManagementComponent />
        <template #fallback>
          <div class="loading-container">
            <el-skeleton :rows="10" animated />
          </div>
        </template>
      </Suspense>
    </div>
  </admin-layout>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue";
import AdminLayout from "@/components/admin/AdminLayout.vue";

// 使用异步组件导入解决没有默认导出的问题
const UserManagementComponent = defineAsyncComponent(
  () => import("@/components/admin/UserManagement.vue")
);
</script>

<style scoped>
.users-view {
  width: 100%;
}

.page-title {
  margin-bottom: 20px;
  color: var(--primary-dark);
  font-size: 1.5rem;
}

.loading-container {
  padding: 20px;
  background: var(--bg-paper);
  border-radius: var(--radius);
}
</style>
